@import "./common";
.container-touch{
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  top:0;
  right:0;
  bottom: 0;
  left:0;
  padding:10px;
  div.touchArea, div.screenArea{
    flex:1;
    height:70%;
    box-shadow: 6px 9px 20px #c3c3c3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    position: relative;
    flex-wrap: wrap;
    border-radius: 10px;
    margin: 10px;
    padding: 10px;
    .img-bg {
      background-size: cover;
      width: 100%;
      height:100%;
      position: absolute;
      background-repeat: no-repeat;
    }
    .bg  i{
      font-size: 140px;
      color: #f7f7f7;
    }
    .dig {
      position: absolute;
      top: 0;
      right: 0;
      text-align: center;
    }
    .buttons-group {
      border:0px dotted #555;
      padding: 5px;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
      margin: 10px;
    }
    button{
      font-size:20px;
      padding:8px;
      margin-right: 2px ;
      outline: none !important;
      cursor: pointer;
      width: 160px;
      margin: 0 20px;
      height: 50px;
    }
    &.split-2, &.split-1, &.split-3 {
      height: 97%;
    }
    &.split-8 {
      height: 46%;
      flex-basis: 20%;
    }

  }
  div.loading{
    flex: 1;
    text-align: center;
    padding:10em;
  }
  div.screenArea {
    iframe {
      width: 100%;
      height: 100%;
    }
    video {
      width: 100%;
      height: 100%;
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.screenArea{
  position: relative;
}
.screenArea .tip{
  position: absolute;
  top: 0;
  font-size: 40px;
  color: aquamarine;
}